<template>
 
    <div>
      <div class="count">
        <button class="sub" @click="sub()">-</button>
        <div><span>{{ num }}</span></div>
        <button class="add" @click="add()">+</button>
       </div>
  </div>
</template>

<script>

export default {
   data() {
    return {
      num:0,
    }
   },
   methods:{
    sub(){
      
       this.num--
       if(this.num<0){
        this.num=0
      }
    }
    ,
    add(){
      this.num++
    }
   }
}
</script>

<style scoped>
span{
  display: inline-block;
  font-size: 20px;
  line-height: 40px;
  text-align: center;
}
     .count{
        width: 180px;
        height: 40px;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        margin: 50px auto 0;
        border-radius: 10px;
     }
     button{
      background-color: rgb(225, 225, 225);
      width: 55px;
      height: 40px;
      border-style: none;
      font-size: 25px;
     } 
     .sub{
      border-radius: 10px 0 0 10px;
     }
     .add{
      border-radius: 0 10px 10px 0;
     }
</style>